<template>
    <div class="forget">
        <div class="re-menu forget-menu">
            <ul class="dev-width">
                <li :class='step==0?"active":""'>
                    <i class="iconfont icon-weixuan"></i>确认会员</li>
                <li :class='step==1?"active":""'>
                    <i class="iconfont icon-weixuan"></i>身份验证</li>
                <li :class='step==2?"active":""'>
                    <i class="iconfont icon-weixuan"></i>重置密码</li>
                <li :class='step==3?"active":""'>
                    <i class="iconfont icon-weixuan"></i>重置成功</li>
            </ul>
        </div>
        <Row class="re-box">
            <Col span="8" offset="8">
            <Form :model="phoneForm" ref="phoneForm" :rules="rules" v-show="step==0" :label-width="80" label-position="right">
                <FormItem label="注册手机" prop="phone">
                    <Row>
                        <Col span="16">
                        <Input v-model.trim="phoneForm.phone" placeholder="请输入手机号"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button type="primary" class="reg-btn" @click="nextStep">下一步</Button>
                </FormItem>
            </Form>
            <Form ref="smsForm" :model="smsForm" v-show="step==1" :rules="rules" :label-width="80" label-position="right">
                <FormItem label="手机号">
                    {{phoneForm.phone}}
                </FormItem>
                <FormItem label="图形验证码" prop="verifyImgCode">
                    <Row>
                        <Col span="16">
                        <Input v-model="smsForm.verifyImgCode" placeholder="请输入图形验证码"></Input>
                        </Col>
                        <Col span="8">
                        <a class="valid-img" @click="verifyCodeImgClick++"><img :src="verifyCodeImg" /></a>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="校验码" prop="verifyCode">
                    <Row>
                        <Col span="16">
                        <Input v-model="smsForm.verifyCode" placeholder="请输入校验码"></Input>
                        </Col>
                        <Col span="8">
                        <a class="yzm" @click="getSmsCodeForSignUp" v-if="yzm">获取校验码</a>
                        <a class="yzm" v-else disabled>{{count}}s后重发</a>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button type="primary" class="reg-btn" @click="nextStep">下一步</Button>
                </FormItem>
            </Form>
            <Form ref="confirmForm" :model="confirmForm" v-show="step==2" :rules="rules" :label-width="80" label-position="right">
                <FormItem label="新密码" prop="newPassword">
                    <Row>
                        <Col span="16">
                        <Input v-model="confirmForm.newPassword" placeholder="请输入新密码" type="password"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="再次输入" prop="confirmPassword">
                    <Row>
                        <Col span="16">
                        <Input v-model="confirmForm.confirmPassword" placeholder="请再次输入新密码" type="password"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button type="primary" class="reg-btn" @click="nextStep">下一步</Button>
                </FormItem>
            </Form>
            <div class="re-sucess forget-sucess" v-show="step==3">
                <h3>
                    <i class="iconfont icon-Success-Small"></i>您的密码已经修改成功！</h3>
                <p>
                    将在
                    <span> {{count}} </span>秒后跳到登录页面！也可点此
                    <nuxt-link :to="{path:'login'}">立即登录</nuxt-link>
                </p>
            </div>
            </Col>
        </Row>
        <!-- <div class="record footdeep">
          <div class="dev-width ">
              <p class="w184">
                  <a href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" target="苏ICP备16066286号">苏ICP备16066286号</a>
              </p>
              <p class="w430">
                  信息产业部备案系统网址
                  <a href="http://www.jstec.com.cn/">www.jstec.com.cn</a>
              </p>
              <p class="w396">
                  Copyright ©2017江苏省技术产权交易市场有限公司
              </p>
          </div> -->
    </div>
    </div>
</template>
<script>
import portal from "~/net/portal"
import { requiredInput, phoneReg, password } from '~/constant/validform'
export default {
    layout: 'onlyHeader',
    head() {
        return {
            title: '忘记密码'
        }
    },
    computed: {
        verifyCodeImg() {
            return "/portal/getCaptchaCode?" + this.verifyCodeImgClick
        }
    },
    data() {
        return {
            step: 0,
            phoneForm: {
                phone: ''
            },
            smsForm: {
                phone: '',
                verifyImgCode: '',
                verifyCode: ''
            },
            confirmForm: {
                newPassword: '',
                confirmPassword: ''
            },
            rules: {
                phone: [{
                    required: true,
                    trigger: "change",
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error("请输入手机号码"));
                        } else if (!phoneReg.test(value)) {
                            callback(new Error("手机号码无效"));
                        } else {
                            portal.isPhoneExist({
                                query: { phone: this.phoneForm.phone }
                            }).then((res) => {
                                if (res.data == false) {
                                    callback(new Error('该手机号未注册'));
                                } else {
                                    callback();
                                }
                            }).catch(() => {
                                callback();
                            })
                        }
                    }
                }],
                verifyImgCode: requiredInput('请输入验证码'),
                verifyCode: requiredInput('请输入验证码'),
                newPassword: password(),
                confirmPassword: [{
                    required: true,
                    trigger: "change",
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('请再次输入密码'))
                        } else if (value !== this.confirmForm.newPassword) {
                            callback(new Error('密码输入不一致'))
                        } else {
                            callback()
                        }
                    }
                }]
            },
            verifyCodeImgClick: 0,
            randomCode: '',
            count: '',
            timer: null,
            yzm: true,
            show: true,
        }
    },
    methods: {
        nextStep() {
            if (this.step == 0)
                this.$refs.phoneForm.validate((valid) => {
                    if (valid) {
                        this.step = 1;
                    }
                })
            else if (this.step == 1) {
                this.$refs.smsForm.validate((valid) => {
                    if (valid) {
                        this.checkSmsCodeForSignUp()
                    }
                })
            } else if (this.step == 2) {
                this.$refs.confirmForm.validate((valid) => {
                    if (valid) {
                        this.changePwdForForgetPwd()
                    }
                })
            }
        },


        getSmsCodeForSignUp() {
            portal.getSmsCodeForForgetPwd({
                query: {
                    phone: this.phoneForm.phone,
                    imgVerifyCode: this.smsForm.verifyImgCode,
                }
            }).then((res) => {
                this.yzm = false;
                this.getCode('yzm');
                this.$Message.success('验证码已发送至您手机');
            })
        },
        checkSmsCodeForSignUp() {
            portal.checkSmsCodeForForgetPwd({
                query: {
                    phone: this.phoneForm.phone,
                    imgVerifyCode: this.smsForm.verifyImgCode,
                    smsVerifyCode: this.smsForm.verifyCode
                }
            }).then((res) => {
                this.randomCode = res.data;
                this.step = 2;
            })
        },
        changePwdForForgetPwd() {
            portal.changePwdForForgetPwd({
                body: this.confirmForm,
                query: {
                    randomCode: this.randomCode
                }
            }).then((res) => {
                this.step = 3;
                this.getCode('go');
            })
        },
        getCode(type) {
            let TIME_COUNT = 0;
            if (type == "yzm")
                TIME_COUNT = 60;
            else
                TIME_COUNT = 3;
            if (this.timer != null) {
                clearInterval(this.timer);
                this.timer = null;
            }
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                } else {
                    if (type == "yzm") {
                        this.yzm = true;
                        clearInterval(this.timer);
                    } else {
                        this.timer = null;
                        this.$router.push("/login")
                        clearInterval(this.timer);
                    }
                }
            }, 1000)
        }
    }
}
</script>
<style lang='less'>
.forget {
  .re-menu {
    width: 100%;
    height: 38px;
    background: #f4f9ff;
    border: 1px solid #e6edf5;
  }
  .re-menu ul li {
    float: left;
    width: 328px;
    background: #f4f9ff;
    border-right: 1px solid #e6edf5;
    height: 100%;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    color: #999;
  }
  .re-menu ul li i {
    margin-right: 10px;
    font-size: 16px;
    color: #d7dce2;
  }
  .re-menu ul li i.icon-Success-Small {
    color: #7ed321;
  }
  .re-menu ul li.active {
    background: #4285f4;
    color: #fff;
  }
  .forget-menu ul li {
    width: 225px;
  }
  .re-box {
    margin-top: 100px;
    .valid-img img {
      width: 108px;
      height: 35px;
      border: 0;
    }
    .other-link a {
      color: #4285f4;
    }
    .reg-btn {
      width: 220px;
      height: 40px;
      text-align: center;
      color: #fff;
      background: #4285f4;
      border: 0;
      font-size: 14px;
      cursor: pointer;
    }
    .yzm {
      width: 100px;
      height: 35px;
      background-color: #4285f4;
      color: #fff;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
      display: block;
      &:hover {
        color: #fff;
      }
      &[disabled] {
        color: white;
        background: #999999;
      }
    }
  }
  .re-sucess {
    text-align: center;
    margin: 0 auto;
    margin-left: 100px;
    h3 {
      font-size: 18px;
      color: #333333;
      text-align: center;
    }
    .icon-xiaolian {
      color: #73cd1f;
      display: block;
      font-size: 40px;
      margin: 0 0 17px;
    }
    p {
      font-size: 12px;
      color: #666;
      text-align: center;
      line-height: 17px;
      span {
        color: #f39800;
      }
    }
  }
  .re-footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
  }
  .footdeep {
    background: #1f292f;
    width: 100%;
    position: absolute;
    bottom: 0;
    -webkit-transition: border linear 0.2s, -webkit-box-shadow linear 0.5s;
    border-color: rgba(33, 32, 32, 0.75);
    -webkit-box-shadow: 0 0 18px #292020;
    p {
      font-size: 13px;
      color: #fff;
      opacity: 0.45;
      line-height: 44px;
      margin-right: 62px;
      float: left;
      a {
        color: #fff;
      }
    }
  }
}
</style>